<template>
  <view class="container">
    <view class="haaaa">
      <view class="header">
        <view class="nav">设备:</view>
        <u-input v-model="value" :type="type" :border="border" :height="60" class="input" @click="show = true" />
        <u-select v-model="show" :list="list" @confirm="confirm"></u-select>
      </view>
      <view class="header">
        <view class="nav">时间:</view>
        <view class="shijian" @click="shoe = true">
          <view class="shijian1">{{shijian1}}</view>
          <view class="shijian2">{{shijian2}}</view>
        </view>
        <u-calendar v-model="shoe" :mode="mode" @change="change"></u-calendar>
      </view>
      <view class="sousuo">
        <u-button type="primary" :ripple="true">搜索</u-button>
      </view>
    </view>
    <view class="list">
      <u-empty text="暂无数据" mode="favor"></u-empty>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: "",
        shijian1: "",
        shijian2: "",
        action: false,
        show: false,
        border: true,
        type: 'select',
        shoe: false,
        mode: 'range',
        list: [{
            value: '1',
            label: '江'
          },
          {
            value: '2',
            label: '湖'
          },
          {
            value: '3',
            label: 'theshy'
          }
        ],
      }
    },
    onLoad() {
      this.value = this.list[0].label
    },
    methods: {
      confirm(e) {
        this.value = e[0].label
      },
      change(e) {
        // console.log(e.startDate);
        this.shijian1 = e.startDate
        // console.log(e.endDate);
        this.shijian2 = e.endDate
      }
    }
  }
</script>

<style lang="scss">
  .header {
    display: flex;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .haaaa {
    padding: 0 20px;
  }
  
  .nav {
    width: 50px;
    height: 30px;
    line-height: 30px;
  }

  .input {
    width: 100%;
  }

  .shijian {
    display: flex;
    height: 60rpx;
    width: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
  }

  .shijian1,
  .shijian2 {
    width: 100px;
    height: 60rpx;
    line-height: 30px;
    margin-left: 30px;
  }
  
  .sousuo {
    margin-top: 20px;
  }
  
  .list {
    height: 200px;
    border-bottom: 1px solid #C0C0C0;
  }
</style>
